<template>
	<view class="content">

		<view v-show="!isCurPwdPass" class="block">
			<view class="title">验证当前密码</view>
			
			<view class="input_item">
				<view class="item_name">确认密码</view>
				<input type="password" v-model="oldPwd" placeholder="请输入当前密码" maxlength="30">
			</view>
			
			<view @click="vertifyOldPwd" class="submit_btn">下一步</view>
		</view>
		
		<view v-show="isCurPwdPass" class="block">
			<view class="title">设置新密码</view>
			
			<view class="input_item">
				<view class="item_name">新密码</view>
				<input type="password" placeholder="请设置新密码" v-model="newPwd" maxlength="30">
			</view>
			
			<view class="input_item">
				<view class="item_name">确认密码</view>
				<input type="password" placeholder="请再次输入新密码" v-model="newPwdAgain" maxlength="30">
			</view>
			
			<view @click="updateNewPwd" class="submit_btn">确认修改</view>
		</view>

	</view>
</template>

<script>
	import {
		encrypt
	} from '@/utils/encrypt.js'
	export default {
		data() {
			return {
				isCurPwdPass: false,
				oldPwd: '',
				newPwd: '',
				newPwdAgain: '',
			};
		},
		methods: {
			// 验证旧密码
			vertifyOldPwd() {
				if(!this.oldPwd) {
					this.$showToast({
						icon: "none",
						title: "请先输入当前密码"
					})
					return false 
				}
				
				this.$http_json({
					url: "/api/user/pwdvertify",
					method: "post",
					data: {
						username: this.$getMemoryPmt('userInfo').username,
						password: encrypt(this.oldPwd),
					}
				}).then(result => {
					console.log(result)
					this.isCurPwdPass = result.data.isCurPwdPass
					// todo
				})
			},
			// 表单验证
			formValidate() {
				if(!this.newPwd || !this.newPwdAgain) {
					this.$showToast({
						icon: "none",
						title: "请将信息填写完整"
					})
					return false
				}
				
				if(this.newPwd.length < 6 || this.newPwdAgain.length < 6) {
					this.$showToast({
						icon: "none",
						title: "密码不能少于6位字符"
					})
					return false
				}
				
				if(this.newPwd !== this.newPwdAgain) {
					this.$showToast({
						icon: "none",
						title: "两次输入的密码不一致"
					})
					return false
				}
				
				return true
			},
			updateNewPwd() {
				// 先进行表单验证
				if(!this.formValidate()) return
				console.log('发请求')
				
				this.$http_json({
					url: "/api/user/update",
					method: "post",
					data: {
						userId: this.$getMemoryPmt('userInfo').id,
						password: encrypt(this.newPwd)
					}
				}).then(res => {
					console.log(res)
					this.$showToast({
						icon: "success",
						title: "修改成功"
					})
					
					this.$clearMemoryPmt()
					
					setTimeout(() => {
						uni.reLaunch({
						    url: '/pages/account/login/index'
						});
					}, 1000)

				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.content {
		padding: 30rpx 30rpx 0 30rpx;
		
		.block {
			.title {
				font-size: 56rpx;
				letter-spacing: 2rpx;
				margin-bottom: 100rpx;
			}
			
			.input_item {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #E9E9E9;
				padding: 20rpx 10rpx;
				
				.item_name {
					min-width: 160rpx;
					font-size: 30rpx;
				}
				
				input {
					width: 100%;
					height: 70rpx;
					font-size: 32rpx;
				}
			}
			
			.submit_btn {
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 100rpx;
				background-color: #617FDE;
				color: #FFFFFF;
				border-radius: 10rpx;
			}
			
		}
	}
</style>
